<script setup lang="ts">
import {onBeforeUnmount, onMounted, onUnmounted, ref, watch} from "vue";
import {getBar, getPieDegree, getPieSex} from "@/components/index/indexEcharts";
import {barInter} from "@/api/interface/interfaceRequest";
import {getIndexBar, getIndexPie} from "@/api/interface/reuqest";
import {barEcharts,pie} from "@/components/index/indexEchartsInter";
import {dayjs} from "element-plus";

var data = new Date()
let startTime = ref<string>(dayjs(new Date(data.getTime() - (7 * 24 * 60 * 60 * 1000))).format("YYYY-MM-DD"))
let endTime = ref<string>(dayjs(data).format("YYYY-MM-DD"))
//echarts图
let bar = ref<barEcharts>()
let pie = ref<pie>()

//日期选择器
const value1 = ref('')
const value2 = ref('')

//柱状图传参
let objbar1:barInter = {
    startTime: startTime.value,
    endTime:endTime.value
}
// 饼图传参
let objbar2:barInter = {
    startTime: startTime.value,
    endTime:endTime.value
}
let barEmpty = ref<boolean>(false)
let pieEmpty = ref<boolean>(false)
//监听柱状图日期
watch(value1,()=>{
    startTime.value = dayjs(value1.value[0]).format("YYYY-MM-DD")
    endTime.value = dayjs(value1.value[1]).format("YYYY-MM-DD")
    objbar1 = {
        startTime : dayjs(value1.value[0]).format("YYYY-MM-DD"),
        endTime : dayjs(value1.value[1]).format("YYYY-MM-DD")
    }
    getIndexBar(objbar1).then((item:any)=>{
        // console.log(item)
        const collageName = item.data.map((value)=>{
            return value.collageName
        })
        const consultBy = item.data.map((value)=>{
            return + value.consultByOffline + + value.consultByPhone
        })
        bar.value = {
            collageName:collageName,
            consultBy:consultBy
        }
        getBar(bar.value)
    })
})
//监听饼图日期
watch(value2,()=>{
    startTime.value = dayjs(value1.value[0]).format("YYYY-MM-DD")
    endTime.value = dayjs(value1.value[1]).format("YYYY-MM-DD")
    objbar2 = {
        startTime : dayjs(value2.value[0]).format("YYYY-MM-DD"),
        endTime : dayjs(value2.value[1]).format("YYYY-MM-DD")
    }
    getIndexPie(objbar2).then((item:any)=>{
        // console.log(12)
        // console.log(item)
        pie.value = {
            bachelor:item.data.bachelor,
            master:item.data.master,
            man:item.data.man,
            woman:item.data.woman,
        }
        getPieSex(pie.value)
        getPieDegree(pie.value)
    })
})
onMounted(async() => {
    //柱状图请求
    await getIndexBar(objbar1).then((item:any)=>{
        if(item.code == 200) {
            // console.log(item)
            if(item.data.length == 0 ){
                barEmpty.value = true
            } else {
                const collageName = item.data.map((value)=>{
                    return value.collageName
                })
                const consultBy = item.data.map((value)=>{
                    return + value.consultByOffline + + value.consultByPhone
                })
                bar.value = {
                    collageName:collageName,
                    consultBy:consultBy
                }
                getBar(bar.value)
            }
        }
    })
    await getIndexPie(objbar2).then((item:any)=>{
        // console.log(item)
        if(item.code == 200){
            if(item.data.length == 0 ) {
                pieEmpty.value = true
            } else {
                pie.value = {
                    bachelor:item.data.bachelor,
                    master:item.data.master,
                    man:item.data.man,
                    woman:item.data.woman,
                }
                getPieSex(pie.value)
                getPieDegree(pie.value)
            }
        }
    })
})
</script>

<template>
    <div class="box">
        <div class="left">
            <div class="leftTop">
                <h1>咨询人数</h1>
                <div class="demo-date-picker">
                    <div class="block">
                        <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            :start-placeholder="startTime"
                            :end-placeholder="endTime"
                        />
                    </div>
                </div>
            </div>
            <div v-if="barEmpty" style="margin-top: 10px">
                <el-empty description="当前时间段无咨询人数" />
            </div>
            <div id="barMain" v-else></div>
        </div>
        <div class="right">
            <div class="rightTop">
                <h1>男女比例</h1>
                <div class="demo-date-picker">
                    <div class="block">
                        <el-date-picker
                            v-model="value2"
                            type="daterange"
                            range-separator="至"
                            :start-placeholder="startTime"
                            :end-placeholder="endTime"
                        />
                    </div>
                </div>
            </div>
            <div v-if="pieEmpty">
                <el-empty description="当前时间段无咨询人数" />
            </div>
            <div class="rightSection" v-else>
                <div id="pieMainSex"></div>
                <div id="pieMainDegree"></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.box {
    padding: 30px;
    display: flex;

    .left {
        width: 45%;
        .leftTop{
            position: relative;
        }
        #barMain {
            height: 350px;
        }
    }

    .right {
        width: 45%;
        .rightTop{
            position: relative;
        }

        .rightSection {
            overflow: hidden;

            #pieMainSex, #pieMainDegree {
                float: left;
                width: 50%;
                height: 300px;
            }
        }
    }

    h1 {
        //margin-bottom: 10px;
        font-weight: bold;
        font-size: 18px;
    }

    //日期选择器
    .demo-date-picker {
        position: absolute;
        top: -8px;
        right: 100px;
        display: flex;
        //width: 50%;
        padding: 0;
        flex-wrap: wrap;

        .block {
            //padding: 30px 0;
            text-align: center;
            border-right: solid 1px var(--el-border-color);
            flex: 1;

            &:last-child {
                border-right: none;
            }
        }
        ::v-deep(.el-range-editor){
            width: 230px;
            height: 25px;
        }
    }
}
</style>
